<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用key管理可复用的元素</title>
    <script src="../public/vue2.7.14-dev.js"></script>
</head>
<body>
    <!-- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 -->
    <div id="app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
          </template>
          <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
          </template>
          <button @click="btn">切换按钮</button>
          <!-- 那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。
            因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder -->

          <br><br>

          <!-- Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。
            只需添加一个具有唯一值的 key attribute 即可 -->
          <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
          </template>
          <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
          </template>
          <button @click="btn">切换按钮</button>
          <!-- 注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key attribute。 -->

    </div>

    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                loginType:'username',
                is:true
            },
            methods: {
                btn(){
                   this.is=!this.is
                   this.loginType=this.is?"username":"email" 
                }
            },
        })
    </script>
</body>
</html>